<template>
	<view>
		<uni-nav-bar left-icon="arrowthinleft" title="我的评价" :border="false" :fixed="true" bg="bg-fff" color="#333"
			@clickLeft="goBack()"></uni-nav-bar>
		<view class="w100 bg-f7f7f7" style="height: 10rpx;"></view>
		<view class="padding-30">
			<!-- 评价列表 -->
			<view v-for="(item,index) in list" :key='index' class="padding-bottom-30">
				<!-- 				<view class="flex align-center">
					<image style="width: 70rpx;height: 70rpx;border-radius: 100%;" :src="item.avatar"></image>
					<text class="fs-26 color-666 margin-left-30">{{item.}}</text>
				</view> -->
				<!-- 	<view class="fs-26 color-999 margin-top-16">12:23</view> -->
				<view class="padding-20 bg-f7f7f7 radius10 flex align-center">
					<image :src="item.avatar" style="width: 100rpx;height: 100rpx;border-radius: 10rpx;"></image>
					<view class="margin-left-16 fs-28 color-333" style="width: 80%;">
						<view class="text-cut">{{item.name}}</view>
						<view class="flex align-center margin-top-20">
							<image  v-for="(item2, index2) in item.service" :key="index2" src="../../static/img/star_on.png" class="star_icon"></image>
							<text class="fs-24 color-999 margin-left-40">{{item.create_time}}</text>
						</view>
						<!-- <view class="">￥418</view> -->
					</view>
				</view>
				<view class="fs-28 color-333 margin-top-24">{{item.content}}</view>
				<view v-if="item.imgs" class="flex align-center flex-wrap margin-top-24">
					<image @click="showImg(index2,item.imgs)" v-for="(item2,index2) in item.imgs" :src="item2" class="imgs radius10 margin-right-16 margin-bottom-20" style="width: 160rpx;height: 160rpx;"></image>
				</view>
				
				<view class="fs-28 color-333 text-right margin-top-24" v-if="item.reply">商家回复:{{item.reply}}</view>
			</view>
			<!-- 评价列表end -->

			<view class="nomore" :class="loadStatus" v-if="list.length"></view>
			<empty v-if="list.length < 1"></empty>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				q: {
					page: 1
				},
				hasMore: true,
				loadStatus: '',
				list: [],
			}
		},
		onLoad() {
			this.getList()
		},
		onReachBottom() {
			if (this.hasMore) {
				this.q.page += 1;
				this.getList()
			}
		},
		methods: {
			// 推荐
			getList() {
				this.isLoading = true;
				this.$api.my_comment(this.q).then(res => {
					if (res.code == 1) {
						this.isLoading = false;
						this.list = [...this.list, ...res.data.data];
						if (res.data.data.length != 0) {
							this.hasMore = true;
							this.loadStatus = '';
						} else {
							this.hasMore = false;
							this.loadStatus = 'over';
						}
					}
				})
			},
			
			
			// 预览商家图片
			showImg(index,imgs) {
				var that = this;
				uni.previewImage({
					current: index,
					urls: imgs,
					longPressActions: {
						itemList: [ '保存图片'],
						success: function(data) {
							uni.downloadFile({
								url: imgs[index],
								success: res2 => {
									uni.saveImageToPhotosAlbum({
										filePath: res2.tempFilePath, 
										success: res2 => {
											that.$msg('保存成功');
										}
									});
								}
							});
							// console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			
			
		}
	}
</script>

<style lang="scss" scoped>
	.star_icon {
		width: 32rpx;
		height: 32rpx;
	}
	.imgs:nth-child(4n+4){margin-right: 0;}
</style>
